import 'bootstrap/dist/css/bootstrap.css'
import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTimes } from '@fortawesome/free-solid-svg-icons'
import style from './TypeList.module.css'
import './TypeList.scss'

TypeList.propTypes = {
  files: PropTypes.array,
  activeId: PropTypes.string,
  unsaveIds: PropTypes.array, 
  onTabClick: PropTypes.func, 
  onCloseTab: PropTypes.func
}

TypeList.defaultProps = {
  unsaveIds: []
}

export default function TypeList({ files, activeId, unsaveIds, onTabClick, onCloseTab }) {
  return (
    <div>
      <ul className="nav nav-pills tablist-component">
        {
          files.map(file => {
            // 未保存标志
            const withUnsavedmark = unsaveIds.includes(file.id)
            const fClassName = classNames({
              'nav-link': true,
              'active': file.id === activeId,
              'li-item': true,
              'clearBorderRadius': file.id === activeId,
              'withUnsaved': withUnsavedmark,
              'aStyle': true
            })
            return (
              <li className="nav-item" key={file.id}>
                <a 
                  href='#' 
                  className={fClassName}
                  onClick={(e) => { e.preventDefault(); onTabClick(file.id) }}
                >
                  <span>{file.title}</span>
                  <span 
                    className="close-icon icon"
                    onClick={(e) => { e.stopPropagation(); onCloseTab(file.id) }}
                  >
                    <FontAwesomeIcon 
                      title='关闭'
                      icon={faTimes} 
                    />
                  </span>
                  { withUnsavedmark && <span className='rounded-circle unsaved-icon'></span> }
                </a>
              </li>
            )
          }
          )
        }
      </ul>
    </div>
  )
}
